<template>
  <div class="order">
    <a-card title="我的送签">
      <div class="order-table">
        <vxe-table border :data="tableList" show-footer :row-config="{ isHover: true }" size="mini">
          <vxe-column title="单号" align="center" width="150">
            <template #default="{ row }"> {{ row.TC001 }}-{{ row.TC002 }}</template>
          </vxe-column>
          <vxe-column title="流程实例名称" align="center" width="120">
            <template #default="{ row }"> {{ row.processInstanceName }}</template>
          </vxe-column>
          <vxe-column title="流程定义ID" align="center" width="300">
            <template #default="{ row }"> {{ row.processDefinitionId }} </template>
          </vxe-column>
          <vxe-column title="流程开始时间" align="center" width="180">
            <template #default="{ row }"> {{ row.startTime }} </template>
          </vxe-column>
          <vxe-column title="进度" align="center" width="180">
            <template #default="{ row }"> {{ row.currentProgress }} </template>
          </vxe-column>
          <vxe-column title="负责人" align="center" width="120">
            <template #default="{ row }"> {{ row.assignee }} </template>
          </vxe-column>
          <vxe-column title="结果" align="center" width="120">
            <template #default="{ row }"> {{ row.result }} </template>
          </vxe-column>
          <vxe-column title="是否挂起" align="center" width="100" fixed="right">
            <template #default="{ row }">
              <a-switch v-model="row.isSuspended" @change="changeStatus(row)" />
            </template>
          </vxe-column>
          <vxe-column title="操作" align="center" width="200" fixed="right">
            <template #default="{ row }">
              <a-space>
                <a-button size="mini" @click="revokePending(row)">取消送签</a-button>
                <a-button size="mini" @click="viewDetails(row)">查看详情</a-button>
              </a-space>
            </template>
          </vxe-column>
        </vxe-table>
      </div>

      <vxe-pager
        v-model:current-page="pagination.current"
        v-model:page-size="pagination.pageSize"
        background
        :total="pagination.total"
        :layouts="['Home', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
        class="order-pager"
        @page-change="getTable"
      >
      </vxe-pager>
    </a-card>

    <!--    取消挂起弹窗-->
    <a-modal v-model:visible="visible" title="取消挂起原因" width="auto" @cancel="visible = false" @ok="handleOk">
      <a-form :model="form">
        <a-form-item label="原因">
          <a-textarea v-model="form.reason" auto-size />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, toRefs } from 'vue';
import importConfig from './approve.ts';
import formButtonGroup from '@com/formButtonGroup/formButtonGroup.vue';
import { EFTimeFormatConversion } from '@utils/baseMethods';
import uploadExcel from '@com/uploadExcel/uploadExcel.vue';

export default defineComponent({
  name: 'OrderDom',
  components: { formButtonGroup, uploadExcel },
  setup() {
    const { base, getTable, changeStatus, handleOk, revokePending, viewDetails } = importConfig();

    return {
      ...toRefs(base),
      getTable,
      changeStatus,
      handleOk,
      revokePending,
      viewDetails,
    };
  },
});
</script>

<style lang="less" scoped>
.order {
  &-table {
    max-height: calc(100vh - 270px);
  }
}

:deep(.arco-card-header) {
  border-bottom: none;
}

:deep(.arco-card-header-title) {
  text-align: left;
}
</style>
